<%@ page contentType="text/html;charset=utf-8"  language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<jsp:include page="../header.jsp" />

<jsp:include page="../navbar.jsp" />

<div class="container-fluid container-margin-top">
	<div class="row">
		<div class="col-lg-2 col-sm-3">
			<jsp:include page="sidebar.jsp" />
		</div>
		<div class="col-lg-10 col-sm-9">              
			<div class="dialog dialog-info">
				<div>
					<h5>近7日签到统计</h5>
				</div>

				<div class="row"> 
					<div class="col-md-6">
						<canvas class="img-responsive" id="chart-checkin-bar" width="400" height="400"></canvas>
					</div>
					<div class="col-md-6">
						<canvas class="img-responsive" id="chart-checkin-pie" width="380" height="380"></canvas>
					</div> 
				</div> 
			</div>
				 
			<div class="dialog dialog-info">

				<div>
					<h5>近7日签退统计</h5>
				</div>

				<div class="row"> 
					<div class="col-md-6">
						<canvas class="img-responsive" id="chart-checkout-bar" width="400" height="400"></canvas>
					</div>
					<div class="col-md-6">
						<canvas class="img-responsive" id="chart-checkout-pie" width="380" height="380"></canvas>
					</div> 
				</div> 
				
			</div>

		</div>
	</div>
</div>

<script src="../public/js/Chart.js"></script>

<script>
	document.title = "查询管理-数据概览";

	var attendStat = ${attendMap};
	var dateList = ${dateList};
	
			var cinbar = $("#chart-checkin-bar").get(0).getContext("2d");
			var cinpie = $("#chart-checkin-pie").get(0).getContext("2d");
			var coutbar = $("#chart-checkout-bar").get(0).getContext("2d");
			var coutpie = $("#chart-checkout-pie").get(0).getContext("2d");
			new Chart(cinbar);
			new Chart(cinpie);
			new Chart(coutbar);
			new Chart(coutpie);

			var bar_data = new Object();
			bar_data.data = {
				labels : dateList,
				datasets : [
					{
						fillColor : "rgba(46,204,113,0.5)",
						strokeColor : "rgba(39,174,96,1)",
						data : [
							attendStat[dateList[0]][0],
							attendStat[dateList[1]][0],
							attendStat[dateList[2]][0],
							attendStat[dateList[3]][0],
							attendStat[dateList[4]][0],
							attendStat[dateList[5]][0],
							attendStat[dateList[6]][0]
						]
					},
					{
						fillColor : "rgba(231,76,60,0.5)",
						strokeColor : "rgba(192,57,43,1)",
						data : [
							attendStat[dateList[0]][1],
							attendStat[dateList[1]][1],
							attendStat[dateList[2]][1],
							attendStat[dateList[3]][1],
							attendStat[dateList[4]][1],
							attendStat[dateList[5]][1],
							attendStat[dateList[6]][1]
						]
					}
				]
			}
			bar_data.option = {    
				scaleOverlay : false, //Boolean - If we show the scale above the chart data   
				scaleOverride : true,  //Boolean - If we want to override with a hard coded scale
				//** Required if scaleOverride is true **
				scaleSteps : 2,  //Number - The number of steps in a hard coded scale
				scaleStepWidth : 10,  //Number - The value jump in the hard coded scale
				scaleStartValue : 0, //Number - The scale starting value
				scaleLineColor : "rgba(0,0,0,.1)",  //String - Colour of the scale line 
				scaleLineWidth : 1, //Number - Pixel width of the scale line  
				scaleShowLabels : true,  //Boolean - Whether to show labels on the scale
				scaleLabel : "<\%=value\%>",  //Interpolated JS string - can access value
				scaleFontFamily : "'Arial'",  //String - Scale label font declaration for the scale label
				scaleFontSize : 12, //Number - Scale label font size in pixels 
				scaleFontStyle : "normal",  //String - Scale label font weight style  
				scaleFontColor : "#666",  //String - Scale label font colour  
				scaleShowGridLines : true,  ///Boolean - Whether grid lines are shown across the chart
				scaleGridLineColor : "rgba(0,0,0,.05)", //String - Colour of the grid lines
				scaleGridLineWidth : 1, //Number - Width of the grid lines  
				barShowStroke : true, //Boolean - If there is a stroke on each bar
				barStrokeWidth : 2, //Number - Pixel width of the bar stroke  
				barValueSpacing : 5,  //Number - Spacing between each of the X value sets
				barDatasetSpacing : 1,  //Number - Spacing between data sets within X values 
				animation : true, //Boolean - Whether to animate the chart
				animationSteps : 60,  //Number - Number of animation steps 
				animationEasing : "easeOutQuart" //String - Animation easing effect 
			}

			var pie_data = new Object();
			pie_data.data = [
				{
					value: attendStat.total[0],
					color:"#2ECC71"
				},
				{
					value : attendStat.total[1],
					color : "#E74C3C"
				}   
			]

			pie_data.option = {      
				segmentShowStroke : true, //Boolean - Whether we should show a stroke on each segment       
				segmentStrokeColor : "#fff",  //String - The colour of each segment stroke     
				segmentStrokeWidth : 2, //Number - The width of each segment stroke      
				animation : true, //Boolean - Whether we should animate the chart        
				animationSteps : 100, //Number - Amount of animation steps       
				animationEasing : "easeOutQuart",  //String - Animation easing effect       
				animateRotate : true, //Boolean - Whether we animate the rotation of the Pie     
				animateScale : false //Boolean - Whether we animate scaling the Pie from the centre   
			}

			new Chart(cinbar).Bar(bar_data.data,bar_data.option);
			new Chart(cinpie).Pie(pie_data.data,pie_data.option);
			


			pie_data.data = [
				{
					value: attendStat.total[2],
					color:"#2ECC71"
				},
				{
					value : attendStat.total[3],
					color : "#E74C3C"
				}   
			]
			bar_data.data = {
				labels : dateList,
				datasets : [
					{
						fillColor : "rgba(46,204,113,0.5)",
						strokeColor : "rgba(39,174,96,1)",
						data : [
							attendStat[dateList[0]][2],
							attendStat[dateList[1]][2],
							attendStat[dateList[2]][2],
							attendStat[dateList[3]][2],
							attendStat[dateList[4]][2],
							attendStat[dateList[5]][2],
							attendStat[dateList[6]][2]
						]
					},
					{
						fillColor : "rgba(231,76,60,0.5)",
						strokeColor : "rgba(192,57,43,1)",
						data : [
							attendStat[dateList[0]][3],
							attendStat[dateList[1]][3],
							attendStat[dateList[2]][3],
							attendStat[dateList[3]][3],
							attendStat[dateList[4]][3],
							attendStat[dateList[5]][3],
							attendStat[dateList[6]][3]
							]
					}
				]
			}
			new Chart(coutbar).Bar(bar_data.data,bar_data.option);
			new Chart(coutpie).Pie(pie_data.data,pie_data.option);


			$("#chart-checkin-bar").css({"width":"auto","height":"auto"});
			$("#chart-checkin-pie").css({"width":"auto","height":"auto"});
			$("#chart-checkout-bar").css({"width":"auto","height":"auto"});
			$("#chart-checkout-pie").css({"width":"auto","height":"auto"});
</script>

<jsp:include page="../footer.jsp" />

